<template>
  <div>
    <el-card
        class="box-card"
        shadow="hover"
    >
      <Pagination
          ref="pagination"
          :queryPage="loadUserPage"
      >
        <div slot="search">
          <el-form
              :inline="true"
              :model="queryForm"
              size="mini"
          >
            <el-form-item label="用户名">
              <el-input
                  v-model="queryForm.username"
                  placeholder="用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                  v-model="queryForm.nickname"
                  placeholder="姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                  v-model="queryForm.mobile"
                  placeholder="手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input
                  v-model="queryForm.email"
                  placeholder="电子邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  @click="$refs.pagination.go(1);"
              >查询
              </el-button>
              <el-button
                  type="success"
                  @click="userFormVisible=true"
              >新增
              </el-button>
              <el-button
                  type="success"
                  @click="$refs.dingtalkImport.open()"
              >导入
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
            slot="table"
            :data="pageData"
            border
            size="mini"
            style="width: 100%"
        >
          <el-table-column
              fixed
              label="#ID"
              prop="id"
              width="150"
          >
          </el-table-column>
          <el-table-column
              label="用户名"
              prop="username"
          >
          </el-table-column>
          <el-table-column
              label="姓名"
              prop="nickname"
          >
          </el-table-column>
          <el-table-column
              label="手机号码"
              prop="mobile"
          >
          </el-table-column>
          <el-table-column
              label="电子邮箱"
              prop="email"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100"
          >
            <template slot-scope="scope">
              <el-button
                  size="small"
                  type="text"
                  @click="userForm.id=scope.row.id;userFormVisible=true"
              >编辑
              </el-button>
              <el-button
                  size="small"
                  type="text"
                  @click="authFormUserId=scope.row.id;authFormVisible=true"
              >授权
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </Pagination>
    </el-card>
    <el-dialog
        :visible.sync="authFormVisible"
        title="授权"
        width="700px"
        @close="onCloseAuth"
        @open="onOpenAuth"
    >
      <el-form :inline="true" :model="authForm" size="mini">
        <el-form-item>
          <el-select v-model="authForm.authType" placeholder="权限类型">
            <el-option v-for="authType in authTypes" :key="authType.code" :label="authType.name"
                       :value="authType.code"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="authForm.authData" placeholder="权限数据">
            <template v-if="authForm.authType=='MANAGE'">
              <el-option label="超级管理员" value="admin"/>
              <el-option label="应用管理员" value="app"/>
              <el-option label="用户管理员" value="user"/>
            </template>
            <template v-if="authForm.authType=='APP'">
              <el-option v-for="app in apps" :key="app.appName" :label="app.appShowName"
                         :value="app.appName"/>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-if="authForm.authType=='APP'">
          <el-select v-model="authForm.authRole" placeholder="权限角色">
            <el-option v-for="authRole in authRoles" :key="authRole.code" :label="authRole.name"
                       :value="authRole.code"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserAuth">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="authTable"
          border
          size="mini"
          style="width: 100%"
      >

        <el-table-column
            label="权限类型"
            prop="authType.name"
        >
        </el-table-column>
        <el-table-column
            label="权限数据"
            prop="authData"
        >
        </el-table-column>
        <el-table-column
            label="权限角色"
            prop="authRole.name"
        >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100"
        >
          <template slot-scope="scope">
            <el-button
                size="small"
                type="danger"
                @click="deleteUserAuth(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
        :title="userFormTitle"
        :visible.sync="userFormVisible"
        width="500px"
        @close="onCloseUser"
        @open="onOpenUser"
    >
      <el-form
          :model="userForm"
          label-width="100px"
          size="mini"
      >
        <el-form-item label="用 户 名">
          <el-input
              v-model="userForm.username"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓   名">
          <el-input
              v-model="userForm.nickname"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
              v-model="userForm.mobile"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮   箱">
          <el-input
              v-model="userForm.email"
              autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
          slot="footer"
          class="dialog-footer"
      >
        <el-button
            type="primary"
            @click="saveUser"
        >保存
        </el-button>
      </div>
    </el-dialog>

    <DingtalkImport ref="dingtalkImport"/>
  </div>
</template>
<script>
import {
  deleteUserAuthApi,
  queryUserAuthListApi,
  saveUserApi,
  saveUserAuthApi,
  userDetailApi,
  userPageApi,
} from "@/api/user";
import Pagination from "@/components/Pagination";
import DingtalkImport from "./components/dingtalkImport";
import {enumsApi} from "@/api/common";
import {appListApi} from "@/api/manage";

export default {
  data() {
    return {
      queryForm: {},
      pageData: [],
      userFormVisible: false,
      userForm: {},
      userFormTitle: "",
      authFormVisible: false,
      authFormUserId: null,
      authTable: [],
      authForm: {},
      authTypes: [],
      authRoles: [],
      apps: [],
    };
  },
  components: {Pagination, DingtalkImport},
  methods: {
    async loadUserPage(current, size) {
      let query = Object.assign({current: current, size: size,}, this.queryForm);
      let data = await userPageApi(query);
      this.pageData = data.records;
      return data;
    },
    onOpenUser() {
      this.userFormTitle = this.userForm.id ? "编辑用户" : "新增用户";
      if (this.userForm.id) {
        this.loadUserFrom(this.userForm.id);
      }
    },
    onCloseUser() {
      this.userForm = {};
    },
    async loadUserFrom(userId) {
      this.userForm = await userDetailApi(userId);
      this.userForm.state = this.userForm.state.code;
    },
    async saveUser() {
      await saveUserApi(this.userForm);
      this.userFormVisible = false;
      this.$refs.pagination.go(1);
    },
    onOpenAuth() {
      this.loadAuthOptions();
      this.loadAuthTable();
      this.authForm.userId = this.authFormUserId;
    },
    async loadAuthOptions() {
      this.authTypes = await enumsApi("AuthType");
      this.authRoles = await enumsApi("AuthRole");
      this.apps = await appListApi();
    },
    onCloseAuth() {
      this.authTable = [];
      this.authForm = {};
    },
    async loadAuthTable() {
      this.authTable = await queryUserAuthListApi(this.authFormUserId);
    },
    async addUserAuth() {
      await saveUserAuthApi(this.authForm);
      this.loadAuthTable();
    },
    async deleteUserAuth(authId) {
      await deleteUserAuthApi(authId);
      this.loadAuthTable();
    },
  }
};
</script>